<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.8.2/css/all.css">
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <input type="text" placeholder="Add a task" class="txtb">
        <div class="notcomp">
            <h3>Not Completed</h3>



        </div>
        <div class="comp">
            <h3>Completed</h3>

        </div>
    </div>
    <script type="text/javascript">
        $(".txtb").on("keyup", function (e) {
            if (e.keyCode == 13 && $(".txtb").val() != "") {
                var task = $("<div class='task'></div>").text($(".txtb").val());
                var del = $("<i class='fas fa-trash-alt'></i>").click(function () {
                    var p = $(this).parent();
                    p.fadeOut(function () {
                        p.remove();
                    });
                });
                var check = $("<i class='fas fa-check'></i>").click(function () {
                    var p = $(this).parent();
                    p.fadeOut(function () {
                        $(".comp").append(p);
                        p.fadeIn();
                    });
                    $(this).remove();
                });
                task.append(del, check);
                $(".notcomp").append(task);
                $(".txtb").val("");
            }

        });
    </script>
</body>

</html>